<style>
.recommendation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
  margin-top: 20px;
  margin-left: 150px;
}
.recommend-item {
  width: 45%;
  margin-bottom: 20px;
}

.recommend-item img {
  width: 100%;
  border-radius: 5px;
}
.recommend-item {
  width: 45%;
  margin-bottom: 20px;
}
.recommend-item button {
  position: absolute;
  width: 600px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  //display: none; /* 默认隐藏 */
}
.tab-item button {
  text-decoration: none;
  border: none;
  background-color: transparent;
}
.button-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  border: none; /* 取消边框 */
}
.button-item:last-child {
  margin-right: 0; /* 最后一个元素右侧距离设为0 */
}

.button-item span {
  font-size: 19px;
  color: #333;
}

.button-item .span1 {
  font-size: 25px;
  color:  #3498db;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #3498db;
  color: white;
  height: 50px;
}

.top-bar {
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
}

.time {
  font-size: 20px;
  position: absolute;
  top: 15px;
  left: 15px;
  right: auto;
}

.app-title {
  font-size: 25px;
  font-weight: bold;
}

.search-box {
  margin-left: 540px;
  margin-top: 45px;
  display: flex;
  align-items: center;
  width:  600px;
  margin-bottom: 20px;

}
.search-box .search-input{
  border-radius: 1000px;
  padding-left: 25px;
  height: 45px;
  font-size: 15px;
}

.item img {
  width: 100%;
  height: auto;
}

.item-info {
  padding: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.description {
  font-size: 14px;
  color: #666;
}
a {
  text-decoration: none;
}
.content img {
  width: 240px;
  height: 360px;
  margin-bottom: 5px;
}
.hover-style {
  background-color: transparent; /* 悬浮时背景透明，即不显示颜色 */
  color: inherit; /* 继承父元素颜色，这里也可按需设置其他颜色 */
}
.recommend-item {
  width: 45%;
  margin-bottom: 20px;
}
.content button {
  position: absolute;
  width: 600px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  //display: none; /* 默认隐藏 */
}
.container{
  width: 600px;
  display: flex;
  justify-content: space-between;
  margin-left: 500px;
}
</style>
<template>
  <div class="home-container">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="top-bar">
        <span class="time">{{ currentTime }}</span>
        <span class="app-title">游玩攻略</span>
        <!-- 这里可以添加更多图标或功能按钮 -->
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
          placeholder="景点/酒店/休闲娱乐/美食/目的地"
          v-model="searchText"
          class="search-input"
      ></el-input>
    </div>

    <!-- 选项卡 -->
    <div class="container">
      <button class="button-item">
        <span class="span1">发现灵感</span>
      </button>
      <button class="button-item">
        <span>怎么玩</span>
      </button>
      <button class="button-item">
        <span>怎么吃</span>
      </button>
      <button class="button-item">
        <span>怎么住</span>
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="recommendation">
      <div class="recommend-item">
        <img src="../../static/images/旅游2.jpeg" alt="推荐1" width="70px" height="500px" >
        <div class="recommend-content">
          <h3>{{ recommend1.title }}</h3>
          <p>{{ recommend1.description }}</p>
        </div>
      </div>

      <!-- 第二个推荐 -->
      <div class="recommend-item">
        <img src="../../static/images/旅游3.jpeg" alt="推荐2" width="70px" height="455px">
        <div class="recommend-content">
          <h3>{{ recommend2.title }}</h3>
          <p>{{ recommend2.description }}</p>
        </div>
      </div>

      <div class="recommend-item" v-for="item in items" :key="item.strategyId">
        <button @click="tiao(item.strategyId)" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"></button>
        <img :src="item.image" alt="" width="70px" height="500px">
        <div class="item-info">
          <div class="title">{{ item.title }}</div>
          <div class="description">{{ item.content }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      recommend1: {
        title: '野玩 坐上火车去拉萨',
        description: '旅游产品：火车票、住宿等'
      },
      recommend2: {
        title: '杭州最值得去的十个景区',
        description: '甜甜 的星儿'
      },
      recommend3: {
        title: '三亚,南山一日游',
        description: '不知道'
      },
      currentTime: new Date().toLocaleTimeString(),
      searchText: '',
      activeTab: '发现灵感',
      items: [],
    };
  },
  mounted() {
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    findPage() {
      axios.post(`http://localhost:1000/you/findAll`).then(res => {
        this.items = res.data.data;
      })
    },
    tiao(strategyId) {
      this.$router.push({path: '/xiang', query: {strategyId: strategyId}});
    },
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
    }
  },
  created() {
    this.findPage();
  }
};
</script>
<script setup>
const handleMouseEnter = () => {
  // 鼠标悬浮时添加类名，可在 CSS 中定义该类名的样式为无颜色等效果
  document.querySelector('.btn').classList.add('hover-style');
};

const handleMouseLeave = () => {
  // 鼠标离开时移除类名，恢复默认样式
  document.querySelector('.btn').classList.remove('hover-style');
};
</script>